<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <h1>体检预约-登录</h1>
        <section>
            <div class="input-box">
                <i class="fa fa-user-o"></i>
                <input type="text" v-model="form.phone" placeholder="输入手机号">
            </div>
            <div class="input-box">
                <i class="fa fa-lock"></i>
                <input type="password" v-model="form.password" placeholder="输入登录密码">
            </div>
            <div class="reg-box">
                <p @click="onRegister">注册</p>
                <p>忘记密码？</p>
            </div>
            <div class="button-box" @click="onSubmit">登录</div>
        </section>

        <footer>
            <div>
                <div class="line"></div>
                <p>有疑问请联系客服</p>
                <div class="line"></div>
            </div>
            <p>4008-XXX-XXX</p>
        </footer>
    </div>
</template>

<script setup>
import { reactive } from "vue";
import router from "@/router";
import { useStore } from 'vuex';
import { loginApi } from '../api/User';
const store = useStore();

const form = reactive({
    phone: '',
    password: ''
})

const onRegister = () => {
    router.push('/register')
}

const onSubmit = async () => {
    try {
        const response = await loginApi(form);
        if (response.code == 200) {
            store.commit('login');
            const form = {
                hpid: '',
                hpname: '',
                smid: '',
                smname: '',
                price: '',
                orderdate: '',
                telephone: '',
                deadline: '',
                address: '',
                businesshours: ''
        }
            sessionStorage.setItem('userInfo', JSON.stringify(response.data));
            localStorage.setItem('token', response.data.token);
            sessionStorage.setItem('orderdetail', JSON.stringify(form));
        } else {
            console.error('登录失败:', response.msg);
        }
    } catch (error) {
        console.error('发生错误:', error)
    }
    if(store.getters.isLoggedIn){
        alert("登录成功");
        router.push('/hospital')
    }else
        alert("登录失败");
}

</script>

<style src="@/assets/css/login.css" scoped>
</style>